<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('查看波形文件')" />
    <style type="text/css">

    </style>
</head>
<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight" style="height: 620px;">
    <div class="row" style="height: 620px;">
        <div class="col-sm-12">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>时间起点:</label>
                            <input type="text" id="startTime" name="startTime"/>
                        </li>
                        <li>
                            <label>时间间隔:</label>
                            <input type="text" id="internal" name="internal"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="view()"><i
                                    class="fa fa-search"></i>&nbsp;查看</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
            <div class="ibox float-e-margins">
                <div class="ibox-content" style="height: 500px">
                    <input name="fileName" th:value="${fileName}" type="hidden">
                    <div class="echarts"  style="height: 100%" id="echarts-line-chart"></div>
                </div>
            </div>
            <div class="select-list">
                <ul>
                    <li>
                        <button style="display: none" id="last" onclick="lastPage()">上一页</button>
                    </li>
                    <li>
                        <button style="display: none" id="next" onclick="nextPage()">下一页</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
    $(function () {
        viewWaveTable();
    });

    function viewWaveTable() {
        let fileName = $("input[name='fileName']").val();
        let startTime = $("input[name='startTime']").val();
        let internal = $("input[name='internal']").val();
        var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
        var timeArr = [];
        var plungerPumpValueArr = [];
        var centrifugalPumpValueArr = [];
        $.ajax({
            cache: true,
            type: "POST",
            url: ctx + "system/tbTest/waveData",
            data: {
                "fileName": fileName,
                "startTime": startTime,
                "internal": internal
            },
            async: false,
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                for (let i = 0; i < data.rows.length; i++) {
                    timeArr.push(data.rows[i].time);
                    plungerPumpValueArr.push(data.rows[i].plungerPumpValue);
                    centrifugalPumpValueArr.push(data.rows[i].centrifugalPumpValue);
                }
                var lineoption = {
                    title : {
                        text: '时间与压力值'
                    },
                    legend: {
                        data:['柱塞泵出口2压力PG10','离心泵出口压力PG2']
                    },
                    grid:{
                        left: '3%',
                        right: '4%',
                        bottom: '17%',
                        containLabel: true
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : timeArr
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            axisLabel : {
                                formatter: '{value} [MPa]'
                            }
                        }
                    ],
                    dataZoom: [
                        {
                            type: 'slider',
                            show: true,
                            xAxisIndex: [0],
                            start: 0,
                            end: 1
                        }
                    ],
                    series : [
                        {
                            name:'柱塞泵出口2压力PG10',
                            sampling: 'average',
                            type:'line',
                            data:plungerPumpValueArr,
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name:'离心泵出口压力PG2',
                            sampling: 'average',
                            type:'line',
                            data:centrifugalPumpValueArr,
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name : '平均值'}
                                ]
                            }
                        },
                    ],
                    sampling: function(frame) {
                        return frame[0]
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        formatter: function (params) {
                            return '<p>柱塞泵: ' + params[0].value + '</p>' +
                                '<p>' + '离心泵: ' + params[1].value + '</p>';
                        },
                    }
                };
                lineChart.setOption(lineoption);
                $(window).resize(lineChart.resize);
            }
        });
    }

    function reset() {
        $("#startTime").val("");
        $("#internal").val("");
    }

    function lastPage() {
        var beginTime;
        let startTime = $("#startTime").val();
        let internal = $("#internal").val();
        let lastTime = parseInt(startTime) - parseInt(internal);
        if (lastTime > 0) {
            beginTime = lastTime;
        } else {
            beginTime = 0;
        }
        $("#startTime").val(beginTime);
        viewWaveTable();
    }

    function nextPage() {
        var beginTime;
        let startTime = $("#startTime").val();
        let internal = $("#internal").val();
        beginTime = parseInt(startTime) + parseInt(internal);
        $("#startTime").val(beginTime);
        viewWaveTable();
    }

    function view() {
        //document.getElementById("last").style.display = "block";
        //document.getElementById("next").style.display = "block";
        viewWaveTable();
    }
</script>
</body>
</html>